<template>
	<div class="order-container">
		<template>
			<el-table :data="orderData" border style="width: 100%">
				<el-table-column prop="orderDetail" align="center" label="产品图片" width="130">
					<!-- 插槽作用域  scope接收element- UI传递的-->
					<template v-slot="scope">
						<el-avatar shape="square" :size="80" fit="scale-down" :src="scope.row.orderDetail[0].imageUrl">
						</el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="order_id" align="center" label="订单编号" width="250"> </el-table-column>
				<el-table-column prop="orderDetail[0].productName" align="center" label="产品名称" width="180">
				</el-table-column>
				<el-table-column prop="orderDetail[0].quantity" width="100" align="center" label="数量">
				</el-table-column>
				<el-table-column prop="total_fee" width="100" align="center" label="总价格"> </el-table-column>
				<el-table-column prop="create_time" align="center" width="180" label="创建时间"> </el-table-column>
				<el-table-column prop="pay_status" width="100" align="center" label="支付状态">
					<template v-slot="{ row }">
						{{ row.pay_status === 1 ? "已支付" : "未支付" }}
					</template>
				</el-table-column>
				<el-table-column prop="order_status" width="100" align="center" label="订单状态">
					<template v-slot="{ row }">
						<span v-if="row.order_status == 0">未提交</span>
						<span v-else-if="row.order_status == 1">提交成功</span>
						<span v-else-if="row.order_status == 2">已经取消</span>
						<span v-else-if="row.order_status == 3">无效订单</span>
						<span v-else-if="row.order_status == 4">交易关闭</span>
						<span v-else-if="row.order_status == 5">退货</span>
					</template>
				</el-table-column>
				<el-table-column prop="opration" align="center" label="操作">
					<template v-slot="{ row }">
						<el-button type="primary" v-hasPay="[row.pay_status, row.order_status]"
							icon="iconfont icon-chongzhi"> 去支付 </el-button>
						<el-button type="danger" icon="el-icon-delete"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>
<script>
	import * as api from "@/api/users";
	export default {
		data(){
			return{
				orderData:[],
			}
		},
		meta: {
			title: "order",
			icon: "iconfont icon-dd", // 存菜单对应的图标的类名
			name:'订单管理'
		},
		created(){
			// 获取订单
			this.getOrderList()
		},
		methods:{
			getOrderList(){
				api.getOrderApi().then(res=>{
					// console.log(res.data)
					this.orderData=res.data.data
				})
			}
		},
		directives:{
			hasPay:{
				inserted(el,binding){
					// 指令接受的是用户的支付状态,0是未支付,1是支付
					// 接收的参数是一个数组
					let [pay_status,order_status]=binding.value
					// 先保存当前的按钮类名
					let className=el.className
					// 当pay_status不是0,order_status不是1时,禁用按钮
					if(pay_status !==0 || order_status !==1){
						el.disabled=true// 按钮禁用
						el.className=className+""+"is-disabled"
					}
				}
			}
		},
	};
</script>
<style scoped lang="less">
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
</style>